<template>
  <div class="chartBox">
    <eChart :option="option"></eChart>
  </div>
</template>

<script>
  import _ from 'lodash'
  import filters from '@/utils/filters'
  export default {
    name: 'itemCenterCenter',
    components: {  },
    data() {
      return {
        option: {}
      }
    },
    mounted() {
      let data = [
        { value: 462, name: '中间验收' },
        { value: 518, name: '变更申联' },
        { value: 235, name: '初步验收' },
        { value: 458, name: '方案论证' },
        { value: 265, name: '基槽验收' },
        { value: 325, name: '基础验收' },
        { value: 416, name: '其他工作' },
        { value: 536, name: '日常巡查' },
        { value: 185, name: '图纸交底' },
        { value: 167, name: '图纸申联' },
        { value: 85, name: '约谈' }
      ]
      this.option = this.getOption(data)
    },
    methods: {
      getOption(data){
        let total = _.sumBy(data, 'value')
        return {
          legend: {
            // type: 'scroll',
            orient: 'vertical', // 图例列表的布局朝向
            top: 'center',
            right: 0,
            width: '70%',
            // height: '100%',
            itemGap: 12, // 图例每项之间的间隔。
            // icon: 'circle',
            formatter: function (name) {
              let target
              for (let i = 0, l = data.length; i < l; i++) {
                if (data[i].name == name) {
                  target = Number(data[i].value)
                }
              }
              let d
              if(total === 0 || target === 0){
                d = 0
              } else {
                d = ((target / total) * 100).toFixed(0)
              }
              let arr = [
                '{a|' + name + ': }',
                '{b|' + target + '}',
                '{d|个}',
                '{c|' + d + '%}',
                '{e| }',
              ]
              return arr.join('')
            },
            itemWidth: 8,
            itemHeight: 8,
            padding: [0, 20],
            textStyle: {
              color: '#fff',
              rich: {
                a: {
                  fontSize: 16,
                  fontFamily: 'PingFangSC',
                  color: 'rgba(255,255,255,0.85)',
                  padding: [0, 0, 0, 0],
                  width: 85
                },
                b: {
                  fontSize: 18,
                  fontFamily: 'DINPro',
                  padding: [0, 0, 0, 0],
                  width: 40
                },
                d: {
                  fontSize: 16,
                  fontFamily: 'PingFangSC',
                },
                c: {
                  fontSize: 20,
                  fontFamily: 'DINPro',
                  color: '#01FFFF',
                  padding: [0, 0, 0, 10],
                  width: 60
                },
                e: {

                }
              }
            }
          },
          series: {
            type: 'pie',
            radius: ['73%', '85%'], // 圆环内外径
            center: ['16.5%', '50%'], // ['24%', '50%']
            // roseType: 'area',
            data: data,
            label: {
              show: true,
              position: 'center',
              formatter: `{a|${filters.numFormat(total)}}\n{b|项目数/个}`,
              rich: {
                a: {
                  color: '#01FFFF',
                  fontSize: 20,
                  fontFamily: 'DingTalk',
                  lineHeight: 24
                },
                b: {
                  color: '#fff',
                  fontSize: 18,
                  fontFamily: 'DingTalk',
                  lineHeight: 22
                },
              }
            },
            labelLine: {
              show: false
            },
            animationDuration: 2800,
            animationEasing: 'cubicInOut',
          }
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .chartBox {
    height: 204px; margin-top: 6px; position: relative;
    &:after {
      content: ''; display: flex; width: 139px; height: 139px; border-radius: 50%;
      position: absolute; top: 50%; margin-top: -70px; /*transform: translateY(-50%);*/ left: 71px;
      background: conic-gradient(from 90deg, rgba(4,193,255,1) 0%, transparent 90%);
      -webkit-mask: radial-gradient( closest-side circle, transparent 94%, red 95% 99%, transparent 100%);
      animation: rotate 10s linear infinite;
    }
    @keyframes rotate {
      from {
        transform: rotate(360deg);
      }
      to {
        transform: rotate(0deg);
      }
    }
  }
</style>
